<template>
  <div>
    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="initMap">
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
  <!-- < 缩放控件 --> 
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
  <!-- 地图类型控件 -->
     <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type> 
      <bm-marker :position="{lng: 116.404, lat: 39.915}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"> 
      <!-- <bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/> -->
      <bm-overlay
      v-for="(item,index) in list"
      :key="index"
    pane="labelPane"
    class="sample"
    @draw="draw($event,item.coord)"
>
    <span>{{ item.label }}{{ item.count }}房子</span>
  </bm-overlay>
    </bm-marker>
    </baidu-map>
  </div>
</template>

<script >
import axios from 'axios'
// center 地图中心点的位置
export default {
  name: 'HmElementPcIndex',

  data () {
    return {
      center: { lng: 116.404, lat: 39.915 },
      // center:"北京"
      zoom: 15 ,// 放大的倍数
      list:[
      {
          "label": "杨浦",
          "value": "AREA|67fad918-f2f8-59df",
          "coord": {
              "latitude": "31.29397421",
              "longitude": "121.5361245"
          },
          "count": 107
      },
      {
          "label": "徐汇",
          "value": "AREA|a1417707-f2c1-e5ef",
          "coord": {
              "latitude": "31.194434",
              "longitude": "121.43798"
          },
          "count": 697
      },
      {
          "label": "普陀",
          "value": "AREA|b3e7fdc7-c67a-5684",
          "coord": {
              "latitude": "31.239297",
              "longitude": "121.42746"
          },
          "count": 182
      },
      {
          "label": "浦东",
          "value": "AREA|48bb555e-09d3-677b",
          "coord": {
              "latitude": "31.159254",
              "longitude": "121.573916"
          },
          "count": 468
      },
      {
          "label": "闸北",
          "value": "AREA|4ae7fdc5-2fda-87b7",
          "coord": {
              "latitude": "31.245238",
              "longitude": "121.462705"
          },
          "count": 75
      },
      {
          "label": "静安",
          "value": "AREA|f9842cb9-3dc8-556d",
          "coord": {
              "latitude": "31.240794",
              "longitude": "121.462509"
          },
          "count": 139
      },
      {
          "label": "黄浦",
          "value": "AREA|feeb90f1-db8b-7790",
          "coord": {
              "latitude": "31.216381",
              "longitude": "121.505573"
          },
          "count": 175
      },
      {
          "label": "宝山",
          "value": "AREA|b6ad32aa-0d1d-88d6",
          "coord": {
              "latitude": "31.31429863",
              "longitude": "121.4163684"
          },
          "count": 85
      },
      {
          "label": "闵行",
          "value": "AREA|5654197a-39af-6dc1",
          "coord": {
              "latitude": "31.162369",
              "longitude": "121.376215"
          },
          "count": 112
      },
      {
          "label": "青浦",
          "value": "AREA|38c39e6b-5dfa-0245",
          "coord": {
              "latitude": "31.181512",
              "longitude": "121.271793"
          },
          "count": 13
      },
      {
          "label": "虹口",
          "value": "AREA|0fc7aa90-2a6a-83be",
          "coord": {
              "latitude": "31.280439",
              "longitude": "121.48269"
          },
          "count": 72
      },
      {
          "label": "嘉定",
          "value": "AREA|fd4020b0-e01c-9faa",
          "coord": {
              "latitude": "31.330734",
              "longitude": "121.260313"
          },
          "count": 40
      },
      {
          "label": "奉贤",
          "value": "AREA|25fe0fdc-e9a1-982f",
          "coord": {
              "latitude": "31.002185",
              "longitude": "121.43787"
          },
          "count": 20
      }
  ]
    }
  },
  mounted() {
    // this.getCityList()
  },
  methods: {
    draw ({el, BMap, map},{latitude,longitude}) {
      const pixel = map.pointToOverlayPixel(new BMap.Point(longitude, latitude))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    },
    initMap ({ BMap, map }) {
    const myGeo = new BMap.Geocoder()
    myGeo.getPoint('上海', function (point) {
    if (point) {
      console.log(point)
      map.centerAndZoom(point, 11)
    }
  }, '上海')
},
 async getCityList () {
  const res = await axios ({
    url:'http://liufusong.top:8080/area/map?id=AREA%7Cdbf46d32-7e76-1196'
  })
  console.log(res);
  this.list = res.data.body
 }
  }
}
</script>

<style lang="less" scoped>
.bm-view {
  width: 100%;
  height: 600px;
}
.sample {
  width: 20px;
  height: 20px;
  line-height: 20px;
  background: rgba(0,0,0,0.5);
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 5px #000;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
}
</style>
